<template>
  <div class="main-wrapper w-full">
    <div class="legend-wrapper">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="(item, index) in legendData"
          :key="index"
          :title="item.label"
          :name="item.label"
        >
          <div class="switch-item" v-for="(innerItem, i) in item.children" :key="i">
            <div class="label-wrapper">
              <i class="h-[25px] w-[25px] text-[20px]">
                <SvgIcon :name="innerItem.label" />
              </i>
              <span class="label">{{ innerItem.label }}</span>
            </div>
            <div
              @click.stop="handleSwitchChange(item, innerItem)"
              class="switch-icon"
              :class="!innerItem.value ? 'switch-icon-close' : ''"
            ></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 底部 -->
    <div class="bottom-wrapper">
      <img src="@/assets/tietu/mid-bot.png" />
      <!-- <button>低空服务总览</button>
      <button @click="handleTip">低空产业总览</button> -->
    </div>
    <HangxianPop />
    <MonitorPop />
    <RiseLandPop />
    <EquipmentPop />
    <!-- <DeviceAttributes /> -->
    <HxqxEchart />
    <Radar />
    <RadarPop />
  </div>
</template>
<script setup>
import HangxianPop from '@/views/hangxian/pop/HangxianPop.vue'
import MonitorPop from '@/views/infrastructure/pop/MonitorPop.vue'
import RiseLandPop from '@/views/infrastructure/pop/RiseLandPop.vue'
import EquipmentPop from '@/views/infrastructure/pop/EquipmentPop.vue'
import DeviceAttributes from '@/views/infrastructure/qxzb/device-attributes.vue'
import HxqxEchart from '@/views/infrastructure/qxzb/hxqx-echart.vue'
import Radar from '@/views/infrastructure/radar/radar'
import RadarPop from '@/views/infrastructure/radar/RadarPop.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { overviewInit, overviewClear } from './js/overview'
import { ElMessage } from 'element-plus'
import {
  managementInit,
  managementClear,
  addAirSpace,
  addmarker3d
} from '@/views/management/js/management'
import {
  hangxianInit,
  hangxianClear,
  addhangxian,
  addQidianMarker
} from '@/views/hangxian/js/hangxian'
import {
  infrastructureInit,
  infrastructureClear,
  addQjss,
  addTdj,
  addJsdev,
  addRadar
} from '@/views/infrastructure/js/infrastructure'
import { addQxdev, clearQx } from '@/views/infrastructure/js/qx'
import {
  addObjMove,
  clear,
  addCusObjectDa,
  cusObjectDaMove,
  addLine,
  ppList,
  pList,
  peopleList,
  navList,
  navList2,
  mhkj,
  mhkj2,
  enList,
  sList,
  clearTimer,
  updateMarkerText
} from '@/views/operation/manned-commute/js/addObjMove'

import { usePopStore } from '@/stores'
import { useFlyNumStore } from '@/stores/modules/flynum'

const flyNumStore = useFlyNumStore()
const popStore = usePopStore()
const activeNames = ref('空域')
const activeButton = ref(0)

const legendData = ref([
  {
    label: '空域',
    children: [
      {
        label: '适飞空域',
        value: true,
        groupId: 'spaceGrid-shifei'
      },
      {
        label: '管制空域',
        value: false,
        groupId: 'spaceGrid-guankong'
      }
      // {
      //   label: '企业空域',
      //   value: false,
      //   groupId: ''
      // },
      // {
      //   label: '空域障碍物',
      //   value: false,
      //   groupId: ''
      // }
    ]
  },
  {
    label: '航线',
    children: [
      {
        label: '文旅观光',
        value: false,
        groupId: 'hangxian-1'
      },
      {
        label: '载人通勤',
        value: false,
        groupId: 'hangxian-2'
      },
      {
        label: '物流运输',
        value: false,
        groupId: 'hangxian-3'
      },
      {
        label: '政务巡检',
        value: false,
        groupId: 'hangxian-4'
      }
    ]
  },
  {
    label: '起降设施',
    children: [
      {
        label: '直升机起降场',
        value: false,
        groupId: ''
      },
      {
        label: 'eVTOL起降场',
        value: false,
        groupId: ''
      },
      {
        label: '无人机起降场',
        value: false,
        groupId: ''
      },
      {
        label: '自动化机巢',
        value: false,
        groupId: ''
      }
    ]
  },
  {
    label: '低空基础设施',
    children: [
      {
        label: '通信',
        value: false,
        groupId: ''
      },
      // {
      //   label: '导航',
      //   value: false,
      //   groupId: ''
      // },
      {
        label: '监视',
        value: false,
        groupId: ''
      },
      {
        label: '气象',
        value: false,
        groupId: ''
      }
    ]
  },
  {
    label: '飞行态势',
    children: [
      {
        label: '直升机',
        value: false,
        groupId: ''
      },
      {
        label: '无人机',
        value: false,
        groupId: ''
      },
      {
        label: '民航客机',
        value: false,
        groupId: ''
      }
    ]
  }
])
const lastType = ref('空域')

onMounted(() => {
  handleClear()
  managementInit()
})
onUnmounted(() => {
  overviewClear()
})
const handleClear = () => {
  __g.marker3d.clear(null)
  __g.marker.clear(null)
  __g.polyline.clear(null)
  __g.polygon3d.clear(null)
  __g.customObject.clear(null)
  __g.radiationPoint.clear(null)

  //取消直升机的计时器
  clearTimer()
}
const handleSwitchChange = (data, item) => {
  if (lastType.value !== '航线' || data.label !== '航线') {
    handleClear()
    for (const i of legendData.value) {
      for (const j of i.children) {
        if (j.label === item.label) continue
        j.value = false
      }
    }
  }
  item.value = !item.value
  if (!item.value && (lastType.value !== '航线' || data.label !== '航线')) return
  const fns = {
    空域: handleAirSpace,
    航线: handleAirLine,
    起降设施: handleQJSS,
    低空基础设施: handleDKJCSS,
    飞行态势: handleFlightPosture
  }
  fns[data.label]?.(item)
  lastType.value = data.label
}
// 空域
const handleAirSpace = (data) => {
  switch (data.label) {
    case '适飞空域':
      addAirSpace('shifei')
      addmarker3d(void 0, 'shifei')
      __g.camera.set(537774.03, 2489244.6425, 6960.361875, -20.365765, -129.461258, 1)
      break
    case '管制空域':
      addAirSpace('guankong')
      addmarker3d(void 0, 'guankong')
      __g.camera.set(537774.03, 2489244.6425, 6960.361875, -20.365765, -129.461258, 1)
      break
    default:
      break
  }
}
// 航线
const handleAirLine = (data) => {
  if (lastType.value !== '航线') {
    __g.camera.set(
      [530410.288125, 2490255.396562, 10993.4025, -47.395252, -97.704369, -0.000003],
      1
    )
    __g.weather.setCloudDensity(0)
  }
  if (data.value) {
    addhangxian(data.groupId)
  } else {
    __g.infoTree.deleteByGroupId(data.groupId)
  }
}
// 起降设施
const handleQJSS = (data) => {
  switch (data.label) {
    case '直升机起降场':
      addQjss('直升机起降坪')
      break
    case 'eVTOL起降场':
      addQjss('eVTOL起降坪')
      break
    case '无人机起降场':
      addQjss('中小型无人机起降场')
      break
    case '自动化机巢':
      addQjss('自动化机巢')
      break
    default:
      break
  }
}
// 低空基础设施
const handleDKJCSS = (data) => {
  switch (data.label) {
    case '通信':
      addTdj()
      break
    case '监视':
      addJsdev()
      addRadar()
      break
    case '气象':
      addQxdev()
      break
    default:
      break
  }
  flyNumStore.setRadioShow(false)
}
// 飞行态势
const handleFlightPosture = (data) => {
  // 更新标签
  updateMarkerText()

  switch (data.label) {
    case '直升机':
      addCusObjectDa(peopleList)
      cusObjectDaMove(peopleList, 40)
      // addLine(peopleList, [1, 0, 1, 1])

      addCusObjectDa(sList)
      cusObjectDaMove(sList, 40)
      // addLine(sList, [1, 0, 1, 1])

      __g.camera.set(537774.03, 2489244.6425, 6960.361875, -20.365765, -129.461258, 1)

      break
    case '无人机':
      addCusObjectDa(navList)
      cusObjectDaMove(navList, 40)
      // addLine(peopleList, [1, 0, 1, 1])

      addCusObjectDa(navList2)
      cusObjectDaMove(navList2, 40)
      // addLine(sList, [1, 0, 1, 1])

      __g.camera.set(537774.03, 2489244.6425, 6960.361875, -20.365765, -129.461258, 1)

      break
    case '民航客机':
      addCusObjectDa(mhkj)
      cusObjectDaMove(mhkj, 40)
      // addLine(peopleList, [1, 0, 1, 1])

      addCusObjectDa(mhkj2)
      cusObjectDaMove(mhkj2, 40)
      // addLine(sList, [1, 0, 1, 1])
      __g.camera.set(537774.03, 2489244.6425, 6960.361875, -20.365765, -129.461258, 1)

      break
    default:
      break
  }
}
const handleTip = () => {
  ElMessage.info('功能开发中！')
}
</script>
<style scoped lang="scss">
.main-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;

  & > * {
    box-sizing: border-box;
    pointer-events: auto;
  }
  .el-collapse {
    pointer-events: auto !important;
  }
  .legend-wrapper {
    width: 180px;
    height: 745px;
    overflow-y: scroll;
    position: absolute;
    bottom: 50px;
    right: 400px;
    background: url('@/assets/images/low-altitude-overview/legend-bg.png') center/100% 100%
      no-repeat;
    display: flex;
    flex-direction: column;
    padding: 8px;
    &::-webkit-scrollbar {
      display: none;
    }
    :deep(.el-collapse) {
      border: unset;
      .el-collapse-item {
        .el-collapse-item__header {
          background: unset;
          border: unset;
          font-family:
            Alibaba PuHuiTi 2,
            Alibaba PuHuiTi 20;
          font-size: 16px;
          color: #ffffff;
          border-bottom: 1px solid rgba(0, 213, 255, 0.6);
        }
        .el-collapse-item__wrap {
          background: unset;
          border: unset;
          .el-collapse-item__content {
            display: flex;
            flex-direction: column;
            row-gap: 5px;
            padding-top: 5px;
            padding-bottom: 0px;
          }
        }
        .switch-item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .label-wrapper {
            display: flex;
            // align-items: center;
            gap: 10px;
            .label {
              font-family:
                Alibaba PuHuiTi 2,
                Alibaba PuHuiTi 20;
              font-size: 14px;
              color: #b2d9ff;
              translate: 0 1px;
              // line-height: 30px;
            }
          }
          .switch-icon {
            width: 25px;
            height: 12.5px;
            cursor: pointer;
            background: url('@/assets/images/low-altitude-overview/switchOpen.png') center/100% 100%;
            &-close {
              background: url('@/assets/images/low-altitude-overview/switchClose.png') center/100%
                100%;
            }
          }
        }
      }
    }
  }
  .bottom-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    translate: -50%;
    display: flex;
    width: 464px;
    height: 47.5px;
    // button {
    //   height: 50px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   cursor: pointer;
    //   padding: 0 10px;
    // }
    img {
      width: 464px;
      height: 47.5px;
    }
  }
}
</style>
